﻿@import 'variable.less';

html, body {
    font-family: @font-family;
}

a {
    color: @color-primary;
}

a:focus, a:hover {
    color: @color-primary;
}

/*徽章*/
.badge {
    &.bg-success {
        background: @color-success;
    }
    &.bg-primary {
        background: @color-primary;
    }
    &.bg-danger {
        background: @color-danger;
    }
    &.bg-info {
        background: @color-info;
    }
}

/*辅助类*/
.text-danger {
    color: @color-danger;
}

.text-success {
    color: @color-success;
}

.text-warning {
    color: @color-warning;
}

.text-primary {
    color: @color-primary;
}

.text-info {
    color: @color-info;
}

.text-muted {
    color: @color-muted;
}

.bg-primary {
    background-color: @color-primary;
}

a.bg-primary:focus, a.bg-primary:hover {
    background-color: @color-primary;
}

/*弹出框*/
.popover {
    border-radius: @border-radius;
    .popover-title {
        border-radius: @border-radius @border-radius 0 0;
    }
}

/*用户输入*/
kbd {
    border-radius: @border-radius;
    font-family: @font-family;
}

/*标签*/
.label {
    border-radius: @border-radius/2;
}

.label-sm {
    padding: .1em .4em .3em;
}

/*缩略图*/
.thumbnail {
    margin-bottom: @spacing;
    border-radius: @border-radius;
}

/*容器*/
.container-fluid,
.container {
    padding-right: @spacing;
    padding-left: @spacing;
}

/*选项卡*/
.nav-tabs {
    > li {
        > a {
            border-radius: @border-radius @border-radius 0 0;
        }
    }
}

/*分页*/
.pagination_box {
    text-align: right;
    .pagination_info {
        display: inline-block;
        vertical-align: middle;
        padding: 10px 15px;
        color: #888;
    }
    .pagination {
        vertical-align: middle;
    }
    .pagination > li > a, .pagination > li > span {
        min-width: 34px;
        text-align: center;
    }
    .pagination > li:first-child > a, .pagination > li:first-child > span {
        border-top-left-radius: @border-radius;
        border-bottom-left-radius: @border-radius;
    }
    .pagination > li:last-child > a, .pagination > li:last-child > span {
        border-top-right-radius: @border-radius;
        border-bottom-right-radius: @border-radius;
    }
    .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
        z-index: 4;
        color: #fff;
        background-color: @color-primary;
        border-color: @color-primary;
    }
    .pagination > li > a, .pagination > li > span {
        color: @color-primary;
    }
}

@media screen and (max-width: 767px) {
    .pagination_info {
        display: none;
    }
}

/*列表组*/
.list-group-item {
    padding-right: @spacing;
    padding-left: @spacing;
}

/*栅格*/
.row {
    margin-right: -@spacing;
    margin-left: -@spacing;
}

[class^="col-"] {
    padding-right: @spacing;
    padding-left: @spacing;
}

.col-xs-2-5 {
    width: 20%;
    padding-right: 7.5px;
    padding-left: 7.5px;
    float: left;
    position: relative;
    min-height: 1px;
}

/*表格*/
.table {
    margin-bottom: @spacing;
}

.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
    border-bottom-width: 1px;
}

/*按钮*/
.btn {
    border-radius: @border-radius;
    outline: none !important;
    box-shadow: none !important;
}

.btn-link {
    color: @color-primary;
    text-decoration: none;

    &:hover,
    &:focus {
        color: @color-primary-hover;
        text-decoration: none;
    }
}

.btn-primary {
    background: @color-primary;
    border-color: @color-primary;
}

.btn-primary.disabled.focus,
.btn-primary.disabled:focus,
.btn-primary.disabled:hover,
.btn-primary[disabled].focus,
.btn-primary[disabled]:focus,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary.focus,
fieldset[disabled] .btn-primary:focus,
fieldset[disabled] .btn-primary:hover {
    background-color: @color-primary-hover;
    border-color: @color-primary-hover;
}

.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open > .dropdown-toggle.btn-primary.focus,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:hover,
.btn-primary.active,
.btn-primary:active,
.open > .dropdown-toggle.btn-primary,
.btn-primary.focus,
.btn-primary:focus {
    background: @color-primary-hover;
    border-color: @color-primary-hover;
}

.btn-info {
    background: @color-info;
    border-color: @color-info;
}

.btn-info.active.focus,
.btn-info.active:focus,
.btn-info.active:hover,
.btn-info:active.focus,
.btn-info:active:focus,
.btn-info:active:hover,
.open > .dropdown-toggle.btn-info.focus,
.open > .dropdown-toggle.btn-info:focus,
.open > .dropdown-toggle.btn-info:hover,
.btn-info:hover,
.btn-info.active,
.btn-info:active,
.open > .dropdown-toggle.btn-info,
.btn-info.focus,
.btn-info:focus {
    background: @color-info-hover;
    border-color: @color-info-hover;
}

.btn-success {
    background: @color-success;
    border-color: @color-success;
}

.btn-success.active.focus,
.btn-success.active:focus,
.btn-success.active:hover,
.btn-success:active.focus,
.btn-success:active:focus,
.btn-success:active:hover,
.open > .dropdown-toggle.btn-success.focus,
.open > .dropdown-toggle.btn-success:focus,
.open > .dropdown-toggle.btn-success:hover,
.btn-success:hover,
.btn-success.active,
.btn-success:active,
.open > .dropdown-toggle.btn-success,
.btn-success.focus,
.btn-success:focus {
    background: @color-success-hover;
    border-color: @color-success-hover;
}

.btn-danger {
    background: @color-danger;
    border-color: @color-danger;
}

.btn-danger.active.focus,
.btn-danger.active:focus,
.btn-danger.active:hover,
.btn-danger:active.focus,
.btn-danger:active:focus,
.btn-danger:active:hover,
.open > .dropdown-toggle.btn-danger.focus,
.open > .dropdown-toggle.btn-danger:focus,
.open > .dropdown-toggle.btn-danger:hover,
.btn-danger:hover,
.btn-danger.active,
.btn-danger:active,
.open > .dropdown-toggle.btn-danger,
.btn-danger.focus,
.btn-danger:focus {
    background: @color-danger-hover;
    border-color: @color-danger-hover;
}

.btn-warning {
    background: @color-warning;
    border-color: @color-warning;
}

.btn-warning.active.focus,
.btn-warning.active:focus,
.btn-warning.active:hover,
.btn-warning:active.focus,
.btn-warning:active:focus,
.btn-warning:active:hover,
.open > .dropdown-toggle.btn-warning.focus,
.open > .dropdown-toggle.btn-warning:focus,
.open > .dropdown-toggle.btn-warning:hover,
.btn-warning:hover,
.btn-warning.active,
.btn-warning:active,
.open > .dropdown-toggle.btn-warning,
.btn-warning.focus,
.btn-warning:focus {
    background: @color-warning-hover;
    border-color: @color-warning-hover;
}

.btn-default {
    background: #fff;
    border-color: @color-default;
}

.btn-default.active.focus,
.btn-default.active:focus,
.btn-default.active:hover,
.btn-default:active.focus,
.btn-default:active:focus,
.btn-default:active:hover,
.open > .dropdown-toggle.btn-default.focus,
.open > .dropdown-toggle.btn-default:focus,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:hover,
.btn-default.active,
.btn-default:active,
.open > .dropdown-toggle.btn-warning,
.btn-default.focus,
.btn-default:focus {
    background: @color-default-hover;
    border-color: @color-default-hover;
}

/*表单*/
.form-control {
    outline: none !important;
    border-radius: @border-radius;
    box-shadow: none !important;
    resize: none;
    border-color: @border-color;
    &:focus {
        border-color: @color-primary;
    }
    &:-webkit-autofill {
        -webkit-box-shadow: inset 0 0 0 1000px #fff !important;
    }
    option {
        &:disabled {
            color: @color-muted;
            cursor: not-allowed;
        }
    }
}

.input-group-addon {
    border-radius: @border-radius;
    background: #fff;
}

.input-group {
    .form-control {
        & + .input-group-addon {
            border-radius: 0 @border-radius @border-radius 0;
        }
    }
}

.form-horizontal {
    .form-group {
        margin-left: -@spacing;
        margin-right: -@spacing;
    }
}

label {
    margin-right: 10px;
    &:last-child {
        margin-right: 0;
    }
    ins {
        text-decoration: none !important;
    }
}

.input-group-btn {
    > .btn {
        &:first-child {
            border-radius: 0 @border-radius @border-radius 0;
        }
    }
}

/*下拉菜单*/
.dropdown {
    .dropdown-menu {
        padding-top: 8px;
        padding-bottom: 8px;
        > li > a {
            padding: 8px 10px;
        }
    }
}

.dropdown-menu {
    border-radius: @border-radius;
}

/*面板*/
.panel {
    margin-bottom: @spacing;
    border: 0;
    border-radius: @border-radius;
    box-shadow: none;
    .panel-heading {
        border-radius: @border-radius @border-radius 0 0;
        padding: 0;
        height: 42px;
        position: relative;
        &:after {
            content: '';
            display: block;
            position: absolute;
            height: 0;
            left: 0;
            right: 0;
            bottom: -1px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.07);
        }
        .panel-title {
            line-height: 42px;
            padding: 0 @spacing;
            .btn {
                margin-left: 15px;
                i.fa {
                    width: 15px;
                    display: inline-block;
                }
            }
        }
        .panel-control {
            height: 100%;
            float: right;
            padding: 0 @spacing;
            &:before {
                content: '';
                height: 100%;
                display: inline-block;
                vertical-align: middle;
            }
            .nav {
                display: inline-block;
                > li {
                    > a {
                        padding-left: @spacing;
                        padding-right: @spacing;
                        margin-left: @spacing;
                        border: none;
                        background: transparent;
                        color: @color;
                    }
                    &.active {
                        > a,
                        > a:focus,
                        > a:hover {
                            color: @color-primary;
                            border-bottom: @color-primary solid 2px;
                        }
                    }
                }
                &.nav-tabs {
                    border-bottom: none;
                }
            }
        }
    }
    .panel-body {
        padding: @spacing;
        .panel-body-title {
            font-size: 14px;
            color: @color-muted;
        }
    }
}

